<template>
  <div>
    <div>姓名：<input type="text" v-model.trim="name"></div>
    <div>年龄：<input type="text" v-model.trim.number="age"></div>
    <div>身高：<input type="text" v-model.trim.number="height">（米）</div>
    <div>体重：<input type="text" v-model.trim.number="weight">（公斤）</div>
    <div>病史：<input type="text" v-model.trim="medicalHistory"></div>
    <div>
      <button @click="onBtnClick">诊断</button>
    </div>
    <div>{{ result }}</div>
  </div>
</template>

<script>

export default {
  name: 'App',
  // 组件的data为啥要是一个函数？去看笔记去
  data() {
    return {
      // 文案形如：患者 张三 的诊断结果：体重过重
      result: '', // 诊断结果文案, 
      name: '', // 姓名
      age: '', // 年龄
      height: '', // 身高
      weight: '', // 体重
      medicalHistory: '' // 病史
    }
  },
  methods: {
    onBtnClick() {
      if (!this.name || !this.age || !this.height || !this.weight) {
        return alert('请将数据填写完整')
      }

      // 如果能走到这里，说明数据校验完成
      // Math.pow 次方
      const BMI = this.weight / Math.pow(this.height, 2)

      if (BMI <= 18.5) {
        this.result = `患者 ${ this.name } 的诊断结果：体重过轻`
      } else if (BMI <= 24.9) {
        this.result = `患者 ${ this.name } 的诊断结果：正常`
      } else if (BMI <= 29.9) {
        this.result = `患者 ${ this.name } 的诊断结果：体重过重`
      } else {
        this.result = `患者 ${ this.name } 的诊断结果：肥胖`
      }

    }
  }
}
</script>
